<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	</head>

	<body>
		<div id="app">
			<div class="carousel">
				<div class="carousel-img" ref="box" style="left: 0;">
					<li v-for="(item,index) in imgList" :key="index">
						<img :src="item" @click="click(index)" />
					</li>
				</div>
				<div class="dot">
					<span :class="{dotRed:curIndex==0}" class="white"></span>
					<span :class="{dotRed:curIndex==1}" class="white"></span>
					<span :class="{dotRed:curIndex==2}" class="white"></span>
				</div>
			</div>
		</div>

		<script>
		/**
		 * offsetLeft只能读不能写
		 * style 只能读行内样式的数据，返回有单位，可读可写
		 * */
			var app = new Vue({
				el: '#app',
				data: {
					curIndex: 0,
					imgList: [
						"img/1.png",
						"img/2.png",
						"img/4.png",
					],
				},
				mounted() {
					this.computerIndex();
				},
				methods: {
					click(item) {
						console.log(item);
					},
					computerIndex() {
						var that = this;
						setInterval(() => {
							console.log("this.$refs.box.offsetLeft:",this.$refs.box.offsetLeft);
							const left = this.$refs.box.offsetLeft;
							switch (true) {
								case (left <= 0 && left > -200):
									that.curIndex = 0;
									break;
								case (left <= -200 && left > -500):
									that.curIndex = 1;
									break;
								case (left <= -500 && left >= -600):
									that.curIndex = 2;
									break;
							}
						}, 1000)
					},
				},
			})
		</script>
	</body>
	<style>

		.carousel,
		li>img {
			width: 300px;
			height: 200px;
		}

		.carousel {
			position: relative;
			border: 1px solid black;
			z-index: 2;
			overflow: hidden;
		}

		.carousel-img {
			width: 900px;
			height: 200px;
			position: absolute;
			animation: carousel 9s linear infinite alternate;
		}
		
		.carousel-img:hover{
			animation-play-state: paused;
		}

		li {
			list-style: none;
			float: left;
		}

		@keyframes carousel {
			from {
				transform: translateX(0px);
			}

			16.7% {
				transform: translateX(0px);
			}

			33.3% {
				transform: translateX(-300px);
			}

			66.7% {
				transform: translateX(-300px);
			}

			83.4% {
				transform: translateX(-600px);
			}

			to {
				transform: translateX(-600px);
			}
		}

		@keyframes carousel-margin {
			from {
				margin-left: 0px;
			}

			16.7% {
				margin-left: 0px;
			}

			33.3% {
				margin-left: -300px;
			}

			66.7% {
				margin-left: -300px;
			}

			83.4% {
				margin-left: -600px;
			}

			to {
				margin-left: -600px;
			}
		}
		.dot {
			position: absolute;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
		}

		.dot span {
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 50%;
		}

		.white {
			background-color: white;
		}

		.dotRed {
			background-color: red;
		}
	</style>

</html>
